<template>
	<view class="wrap safe-area flex column align-center">
		<view class="wrap-white-bg">
			<block v-for="(item, index) in list" :key="index">
				<rowInput 
					:item="item" 
					v-model="dataInfo[item.key]"
					v-if="item.type === 'input' && item.direct === 'row' && item.isShow" />
					
				<rowChoose v-else-if="item.type === 'picker' && item.direct === 'row' && item.isShow" :item="item" v-model="dataInfo[item.key]" />
				
				<rowUpload
					v-else-if="item.type === 'upload' && item.direct === 'row' && item.isShow"
					:item="item"
					v-model="dataInfo[item.key]"
				/>
				
				<wrapUpload
					v-else-if="item.type === 'upload' && item.direct === 'column' && item.isShow"
					:item="item"
					v-model="dataInfo[item.key]"
				/>
				
				<wrapEditor :item="item" v-model="dataInfo[item.key]" v-else-if="item.type === 'editor' && item.isShow" />
				
				<wrapSku v-else-if="item.type === 'sku' && item.isShow" :spu.sync="dataInfo.spu" :item="item" v-model="dataInfo[item.key]" />
			</block>
		</view>
		
		<view class="sure-btn theme-gradient-btn f-34" @click="onSubmit">提交</view>
	</view>
</template>

<script>
	import {getGoodsCategory, getShopGoodsCategory, getBrandList, getLogisticsList, addGoods} from "@/API/goods.js";
	import rowInput from "@/components/form/rowInput.vue";
	import rowChoose from "@/components/form/rowChoose.vue";
	import rowUpload from "@/components/form/rowUpload.vue";
	import wrapUpload from "@/components/form/upload.vue";
	import wrapEditor from "@/components/form/editor.vue";
	import wrapSku from "@/components/form/sku.vue";
	
	export default {
		components: {
			rowInput,
			rowChoose,
			rowUpload,
			wrapUpload,
			wrapEditor,
			wrapSku
		},
		data() {
			return {
				dataInfo: {
					title: "", //商品名称
					category_id: "", //商品分类
					delivery_type: "", //商品类型 0:正常商品 1:卡券/套餐 2:自提商品 3:同城配送
					shop_category_id: "", //店铺内部分类
					freight_id: "", //运费模版
					brand_id: "", //品牌ID
					image: "", //商品图片
					images: "", //图片轮播图
					content: "", //商品详情信息
					validity_time: "", //有效期
					sku: [], //价格
					spu: [], //规格
				},
				
				cateList: [], //分类列表
				shopCateList: [], //店铺内部分类
				freightList: [], //运费模版列表
				brandList: [], //品牌列表
				
				userInfo: null, // 用户信息
			}
		},
		computed: {
			list() {
				return [
					{
						title: "商品名称",
						require: true,
						type: "input",
						direct: "row",
						key: "title",
						mode: "text",
						place: "请输入商品名称",
						tips: "请输入商品名称",
						isShow: true,
					},
					{
						title: "商品类型",
						require: true,
						type: "picker",
						direct: "row",
						key: "delivery_type",
						mode: "selector",
						rangeKey: "title",
						list: [
							{ title: "卡券/套餐", id: "1"},
							{ title: "自提商品", id: "2"},
							{ title: "同城配送", id: "3"}
						],
						isArrow: true,
						place: "请选择商品类型",
						tips: "请选择商品类型",
						isShow: this.userInfo === null ? false : this.userInfo.shop_id.shop_type === "0",
					},
					{
						title: "商品分类",
						require: true,
						type: "picker",
						direct: "row",
						key: "category_id",
						mode: "multiSelector",
						rangeKey: "name",
						next: "children",
						level: 3,
						list: this.cateList,
						place: "请选择商品分类",
						tips: "请选择商品分类",
						isArrow: true,
						isShow: true,
					},
					{
						title: "店铺内部分类",
						require: false,
						type: "picker",
						direct: "row",
						key: "shop_category_id",
						mode: "multiSelector",
						rangeKey: "name",
						next: "children",
						level: 3,
						list: this.shopCateList,
						place: "请选择店铺内部分类",
						tips: "请选择店铺内部分类",
						isArrow: true,
						isShow: this.shopCateList.length > 0,
					},
					{
						title: "运费模版",
						require: true,
						type: "picker",
						direct: "row",
						key: "freight_id",
						mode: "selector",
						rangeKey: "name",
						list: this.freightList,
						place: "请选择运费模版",
						tips: "请选择运费模版",
						isArrow: true,
						isShow: this.userInfo === null ? false : this.userInfo.shop_id.shop_type === "1"
					},
					{
						title: "品牌",
						require: false,
						type: "picker",
						direct: "row",
						key: "brand_id",
						mode: "selector",
						rangeKey: "name",
						list: this.brandList,
						place: "请选择品牌",
						tips: "请选择品牌",
						isArrow: true,
						isShow: true,
					},
					{
						title: "有效期",
						require: true,
						type: "input",
						direct: "row",
						key: "validity_time",
						maxlength: 4,
						mode: "number",
						place: "请输入有效期",
						tips: "请输入有效期",
						isShow: true,
					},
					{
						title: "商品图片",
						require: true,
						type: "upload",
						direct: "row",
						key: "image",
						tips: "请上传商品图片",
						isShow: true,
					},
					{
						title: "商品轮播图",
						require: true,
						type: "upload",
						direct: "column",
						key: "images",
						tips: "请上传商品轮播图",
						isShow: true,
					},
					{
						title: "商品详情",
						require: true,
						type: "editor",
						key: "content",
						place: "请填写商品详情",
						tips: "请填写商品详情",
						isShow: true,
					},
					{
						title: "规格",
						require: true,
						type: "sku",
						key: "sku",
						tips: "请上传规格",
						isShow: true
					}
				]
			}
		},
		onLoad() {
			this.$commonNetwork.getUserIdenInfoData((res) => {
				this.userInfo = res;
				if (res.shop_type === "1") {
					this.getFreightData();
				}
			});
			this.getCateData();
			this.getShopCateData();
			this.getBrandData();
		},
		methods: {
			/**
			 * 提交
			 */
			onSubmit() {
				if (this.$filters.judgeFormData(this.list, this.dataInfo)) {
					let obj = {...this.dataInfo};
					this.$throttle(() => {
						addGoods(obj).then(res => {
							this.$st.success("添加成功", () => {
								uni.navigateBack();
							})
						})
					});
				}
			},
			/**
			 * 获取分类
			 */
			getCateData() {
				getGoodsCategory().then(res => {
					this.cateList = res.data;
				})
			},
			/**
			 * 店铺内部分类
			 */
			getShopCateData() {
				getShopGoodsCategory().then(res => {
					this.shopCateList = res.data;
				})
			},
			/**
			 * 获取品牌分类
			 */
			getBrandData() {
				getBrandList().then(res => {
					this.brandList = res.data;
				})
			},
			/**
			 * 获取运费模版
			 */
			getFreightData() {
				getLogisticsList().then(res => {
					this.freightList = res.data;
				})
			}
		}
	}
</script>

<style>
	@import "@/css/publish.css";
</style>